<!-- 货品选择下拉框 -->
<template>
  <el-select
    :value="value"
    :disabled="disabled"
    filterable
    remote
    reserve-keyword
    :placeholder="placeholder"
    :remote-method="customSearch"
    @change="updateValue"
    style="width: 100%;"
    :loading="customLoading">
    <el-option
      v-for="(item,index) in data"
      :key="index"
      :label="item[optionLabel]"
      :value="item[optionValue]"
      :disabled="item[optionStatus]!=0"
    >
    </el-option>
    <el-pagination small layout="prev, pager, next" @current-change="changePage"
                   :hide-on-single-page="true" :page-size="Pagination.limit" :current-page="Pagination.page"
                   :pager-count="5" :total="Pagination.count">
    </el-pagination>
  </el-select>
</template>

<script>
import {listCustom} from "@/api/wms/custom";

export default {
  name: 'index',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // 选中的数据(v-modal)
    value: null,
    // 提示信息
    placeholder: {
      type: String,
      default: '请选择自定义模板'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    optionLabel: {
      type: String,
      default: 'name'
    },
    optionValue: {
      type: String,
      default: 'id'
    },
    optionStatus: {
      type: String,
      default: 'status'
    },
  },
  data() {
    return {
      Pagination: {
        limit: 5,
        page: 1,
        count: 0
      },
      //货品列表
      data: [],
      //货品加载状态
      customLoading: false,
    };
  },
  created() {
    /* 获取货品数据 */
    this.customSearch();
  },
  methods: {
    customSearch(queryString) {
      this.customLoading = true;
      listCustom({name: queryString, ...this.Pagination}).then(response => {
        this.data = response.rows
        this.Pagination.count = response.total
        this.customLoading = false;
      });
    },
    changePage(currPage) {
      this.Pagination.page = currPage;
      this.customSearch();
    },
    updateValue(value) {
      let row = this.data.filter(item => {
        return item.id === value;
      })
      this.$emit('change', value, row[0]);
    }
  }
};
</script>

<style scoped></style>
